<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content
        <input type="text" id="messageinput"/>
        </div>
        <button type="button" onclick="openSocket()" >Open</button>
        <button type="button" onclick="send()" >Send</button>
        <button type="button" onclick="closeSocket()" >Close</button>
        <p></p>
        <p></p>
        <!-- Las respuestas del servidor se escreiben aqui-->
        <div id="messages"></div>
        
        <!-- utilizando el websocket-->
        
    <script type="text/javascript">
            var webSocket;
            var messages = document.getElementById("messages");
            
            function openSocket() {
             webSocket = new WebSocket ("ws://localhost:8080/WebSocketDemo/proceso");
             
             webSocket.onopen = function (event) {
                 if(event.data === undefined)
                     return;
                 writeResponse(event.data);
             };
             webSocket.onmessage = function(event) {
                 writeResponse(event.data);
             };
             webSocket.onclose = function(event){
                 writeResponse("Conexion cerrada")
             };
             
            }
                  
            function send() {
                var text = document.getElementById("messageinput").value;
                webSocket.send(text);
            }
            
            function closeSocket() {
                webSocket.close();
            }
            
            function writeResponse(text) {
                messages.innerHTML += "<br/>" + text;
            }
     </script>        
        
    </body>
</html>
